<script>
//基本折线图配置
import BaseConfig from '../BaseConfig';
import * as ConfigEnum from '../config/config-enum';

export default {
  name: 'BarConfig',
  mixins: [BaseConfig],
  data() {
    return {
      specBarWidth: false, //是否指定柱宽度
      barWidth: 40, //柱宽
      barGap: 30, //柱间距
      barCategoryGap: 30, //柱分类间距
    };
  },
  //转换数据类型
  created() {
    let bw = this.chartOptions.extend.series[0].barWidth;
    if (bw === 'auto') {
      this.specBarWidth = false;
    } else {
      this.specBarWidth = true;
      this.barWidth = bw;
    }
    this.barGap = parseInt(this.chartOptions.extend.series[0].barGap);
    this.barCategoryGap = parseInt(this.chartOptions.extend.series[0].barCategoryGap);
  },
  methods: {
    //更新柱宽度
    updateBarWidth() {
      if (this.specBarWidth) {
        this.chartOptions.extend.series[0].barWidth = this.barWidth;
      } else {
        this.chartOptions.extend.series[0].barWidth = 'auto';
      }
      this.updateSeriesAndOptions('barWidth');
    },
    //更新柱间距
    updateBarGap() {
      this.chartOptions.extend.series[0].barGap = this.barGap + '%';
      this.updateSeriesAndOptions('barGap');
    },
    //更新柱分类间距
    updateBarCatalogGap() {
      this.chartOptions.extend.series[0].barCategoryGap = this.barCategoryGap + '%';
      this.updateSeriesAndOptions('barCategoryGap');
    },
  },
};
</script>

<template>
  <div>
    <Row>
      <Col span="8">
      <span>指定柱宽：</span>
      </Col>
      <Col span="16">
      <Switch
        v-model="specBarWidth"
        @on-change="updateBarWidth">
        <span slot="open">是</span>
        <span slot="close">否</span>
      </Switch>
      </Col>
    </Row>
    <Row v-if="specBarWidth">
      <Col span="8">
      <span>柱宽：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="barWidth"
        :min="1"
        @on-change="updateBarWidth"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>柱间距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="barGap"
        :min="1"
        @on-change="updateBarGap"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>柱分类间距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="barCategoryGap"
        :min="1"
        @on-change="updateBarCatalogGap"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>柱圆角半径：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.settings.itemStyle.normal.barBorderRadius"
        :min="0"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>填充透明度：</span>
      </Col>
      <Col span="16">
      <Slider
        v-model="chartOptions.settings.itemStyle.normal.opacity"
        :step="0.1"
        :min="0"
        :max="1"
        show-stops
        @on-change="updateOptions"></Slider>
      </Col>
    </Row>
  </div>
</template>

<style>
</style>
